<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <style>
    /* 确保 #app 可滚动 */
    #app {
      width: 100vw;
      height: 100vh;
      overflow: auto;
      /* 或 overflow-y: auto */
      /* 可选：防止 body 自带滚动条 */
      box-sizing: border-box;
      /* 关键：预留滚动条空间，但无论是否出现滚动条，布局都不变 */
      scrollbar-gutter: stable;
    }

    /* WebKit 浏览器（Chrome, Edge, Safari）自定义滚动条 */
    #app::-webkit-scrollbar {
      width: 10px;
      /* 垂直滚动条宽度 */
    }

    #app::-webkit-scrollbar-track {
      background: #f5f5f5;
      /* 轨道背景 */
      border-radius: 5px;
    }

    #app::-webkit-scrollbar-thumb {
      background: #aaa;
      /* 滑块颜色 */
      border-radius: 5px;
    }

    #app::-webkit-scrollbar-thumb:hover {
      background: #888;
      /* 悬停时滑块颜色 */
    }

    /* Firefox 自定义滚动条（有限支持） */
    #app {
      scrollbar-width: thin;
      /* thin | auto | none */
      scrollbar-color: #aaa #f5f5f5;
      /* 滑块颜色 轨道颜色 */
    }
  </style>
</head>

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>